<!--
 * @Descripttion: 
 * @version: 
 * @Author: xcb
 * @Date: 2022-02-22 16:20:55
 * @LastEditors: xcb
 * @LastEditTime: 2022-02-23 09:25:19
-->
<!--
 * @Descripttion: 
 * @version: 
 * @Author: xcb
 * @Date: 2022-02-10 09:55:53
 * @LastEditors: xcb
 * @LastEditTime: 2022-02-22 16:19:39
-->
<template>
  <div class="login">
      <div class="login-box">
          <div class="title">用户登录</div>
          <van-form @submit="onLogin">
            <van-cell-group inset>
                <van-field
                v-model="loginForm.username"
                name="用户名"
                label="用户名"
                placeholder="用户名"
                :rules="[{ required: true, message: '请填写用户名' }]"
                />
                <van-field
                v-model="loginForm.password"
                type="password"
                name="密码"
                label="密码"
                placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]"
                />
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                登录
                </van-button>
            </div>
           </van-form>
      </div>
  </div>
</template>

<script>
import jwt_decode from "jwt-decode";
import { login } from '@/api/dataServe'
export default {
  components: {},
  props: {},
  data() {
    return {
        loginForm:{
            username:'admin',
            password:'123456'
        }
    };
  },
  created() {},
  mounted() {},
  methods: {
      async onLogin() {
          const res = await login(this.loginForm)
          console.log(res);
          if(res.code == 0 && res.data.length) {
            const exp = jwt_decode(res.data).exp;
            window.localStorage.setItem('token',res.data)
            window.localStorage.setItem('exp',exp)
            this.$toast.success('登陆成功')
            this.$router.push({name:'Index'})
          } else {
            this.$toast.fail(res.msg)
          }
       },
  }
};
</script>
<style lang='scss' scoped>
.login{
    width: 100%;
    height: 100%;
    background-color: #eee;
    .login-box {
        .title {
            text-align: center;
            font-size: 24px;
            font-weight: 700px;
            margin: 20px 0;
        }
        width: 40%;
        height: 30%;
        background-color: #fff;
        border-radius: 10px;
        box-shadow:0px 0px 20px #ccc;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
}
</style>